<template>
    <!-- 新增按钮组件 -->
    <div class="add_box">
        <div class="line" :class="[type=='parallelBranch'? 'bx_line':type=='anyBranch'? 'ry_line':'tj_line']">
        </div>
        <el-popover
          @show="showTip"
          ref="popover"
          placement="right"
          title=''
          trigger="hover"
          >
            <div class="add-node-popover-body">
              <a class="add-node-popover-item approver" @click="addType(1)">
                  <div class="item-wrapper">
                      <span class="iconfont icon-icon-test"></span>
                  </div>
                  <p class="icon_text">审批人</p>
              </a>
              <a class="add-node-popover-item notifier" @click="addType(2)" v-if="nodeInfo.type!='parallelLine'&&nodeInfo.type!='conditionLine'&&nodeInfo.type!='anyLine'&&showBranch">
                  <div class="item-wrapper">
                      <span class="iconfont icon-fenzhi"></span>
                  </div>
                  <p class="icon_text">并行审批</p>
              </a>
              <a class="add-node-popover-item any" @click="addType(3)" v-if="nodeInfo.type!='anyLine'&&nodeInfo.type!='conditionLine'&&nodeInfo.type!='parallelLine'&&showBranch">
                  <div class="item-wrapper item-wrapper3">
                      <span class="iconfont icon-fenzhi"></span>
                  </div>
                  <p>任意审批</p>
              </a>
              <!-- <a class="add-node-popover-item approver" @click="addType(4)">
                  <div class="item-wrapper">
                      <span class=" el-icon-help iconfont1 "></span>
                  </div>
                  <p class="icon_text">固定节点</p>
              </a> -->
              <a class="add-node-popover-item condition" @click="addType(5)" v-if="nodeInfo.type!='anyLine'&&nodeInfo.type!='conditionLine'&&nodeInfo.type!='parallelLine'&&showBranch">
                  <div class="item-wrapper item-wrapper3">
                      <span class="iconfont icon-fenzhi"></span>
                  </div>
                  <p>条件分支</p>
              </a>
          </div>
        </el-popover>
        <div class="add_btn" v-popover:popover v-if="!showZZ&&!showEdit">
          +
        </div>
    </div>
</template>
<script>
import store from '../store.js'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    store,
    props: ["nodeInfo","type"],
    data() {
        return {
            visible: false,
            hidePopover:false,
            showBranch:true
        }
    },
    computed:{
      ...mapState({
        dataList: state => state.dataList,
        storeId: state => state.storeId,
        showZZ: state => state.showZZ,
        showEdit: state => state.showEdit,
      })
    },
    watch:{
      // hidePopover(newVal){
      //   if(newVal){
      //     this.recurrenceFun(this.dataList,this.nodeInfo)
      //   }
      // }
    },
    
    methods: {
      ...mapMutations([
        'updataList'
      ]),
      showTip(){
        this.recurrenceFun(this.dataList,this.nodeInfo)
      },
      recurrenceFun(list,infoData){
        
        list.forEach((item,index) => {
          if(item.children&&item.children.length>0){ // 有children的时候要递归循环
            if(index<list.length-1){//后面还有节点
              
              if(item.stepId==infoData.stepId){ 
                if(list[index+1].type=='parallelBranch'||list[index+1].type=='anyBranch'||list[index].type=='conditionBranch'){
                  this.showBranch = false
                }
                // this.showBranch = true
                return
              }
            }else{//后面没有节点
              if(item.stepId==infoData.stepId){ 
                console.log(list[index].type,444)
                if(list[index].type=='parallelBranch'||list[index].type=='anyBranch'||list[index].type=='conditionBranch'){
                  this.showBranch = false
                }
                // this.showBranch = true
                return
              }
            }
            
            this.recurrenceFun(item.children,infoData)
          }else{ // 没有children就正常判断找id
            if(index<list.length-1){
              if(item.stepId==infoData.stepId){ 
                console.log(list[index].type,3333)
                console.log(list[index+1].type,222)
                if(list[index+1].type=='parallelBranch'||list[index+1].type=='anyBranch'||list[index+1].type=='conditionBranch'){
                  this.showBranch = false
                }else{
                  this.showBranch = true
                }
                // this.showBranch = true
                return
              }
            }
          }
        });
      },
      addNode(list,stepId,nodeData,type){ // list 传入的待循环的数据，stepId为新增节点的来源节点的id   nodeData  传入的要插入的节点数据  type  新增的节点类型
        let newList = list
        try{
          newList.forEach((item,index)=>{  // 循环列表
            if(item.stepId==stepId){ // 找到当前节点要插入的位置
              if(item.type=='parallelLine'||item.type=='anyLine'||item.type=='conditionLine'){ // 判断是不是再线路第一个插入,是线路第一个上插入的时候要改children第一个的prev
                nodeData.prevStepId = item.stepId
                nodeData.regularNodeKey = item.regularNodeKey
                nodeData.parentStepId = item.stepId
                item.children[0].prevStepId = nodeData.stepId
                item.children.splice(0,0,nodeData)
                throw new Error("EndIterative");
              }else{
                if(item.type=='regular'){
                  nodeData.regularNodeKey = item.key
                  if(type==2||type==3){
                    nodeData.children[0].regularNodeKey = item.key
                    nodeData.children[1].regularNodeKey = item.key
                  }
                }else{
                  nodeData.regularNodeKey = item.regularNodeKey
                  if(type==2||type==3||type==5){
                    nodeData.children[0].regularNodeKey = item.regularNodeKey
                    nodeData.children[1].regularNodeKey = item.regularNodeKey
                    nodeData.children[0].children[0].regularNodeKey = item.regularNodeKey
                    nodeData.children[1].children[0].regularNodeKey = item.regularNodeKey
                  }
                }
                if(item.parentStepId){ // 处理父节点id
                  nodeData.parentStepId = item.parentStepId
                }else{
                  nodeData.parentStepId = null
                }
                if((newList.length-1)>index){ // 如果不是线路最后一个，需要将要插入位置后面的节点的prev改为当前节点的id
                  nodeData.prevStepId = item.stepId
                  newList[index+1].prevStepId = nodeData.stepId
                  newList.splice(index+1,0,nodeData)
                  throw new Error("EndIterative");
                }else{ 
                  nodeData.prevStepId = item.stepId
                  newList[index].isEnd = 0
                  nodeData.isEnd = 1
                  newList.splice(index+1,0,nodeData)
                  throw new Error("EndIterative");
                }
              }
            }
            if(item.children&&item.children.length>0){ // 有子节点的时候，应该递归子节点

              this.addNode(item.children,stepId,nodeData,type)  // 递归线路
            }
          })
        }catch(e){
          if(e.message != "EndIterative") throw e;
        }
      },
      

      newId(){
        return Date.now()+Math.round(Math.random()*1000);
      },
      updataId(){
        this.$store.state.storeId++
        return this.storeId
      },
      addType(type){
        var nodeData = {}
        this.hidePopover = false
        if(type==1){
          let id = this.updataId()
          nodeData = {
            "stepId":id,//节点ID
            "name":"审核人"+id,//节点名称
            "prevStepId":this.nodeInfo.stepId ,//上个节点
            "children": null,
            "type":'approve',// 审核人
            "isEnd":0,
            "parentStepId": null,
            "auditType": [], // 审核状态
            "userIdList":[],
            'regularNodeKey':'',// 上个节点的key
            'backNode':'',// 退回节点名称
            "userPermissionSpecific": {
              "examineType" : 1,
              "designatedPerson" :[],
              "designatedRoles": [],
              "designatedDepartments":[],
              "actionSpecificList":[],
              "memberIdList":[]
            }// 选择的审核人列表
          }
          this.addNode(this.dataList,this.nodeInfo.stepId,nodeData,type)
        }else if(type==2){
          let id = this.updataId();
          let id1 = this.updataId();
          let id2 = this.updataId();
          let id3 = this.updataId();
          let id4 = this.updataId();
          nodeData = {
          "stepId":id,//节点ID
          "name":"并行分支"+id,//节点名称
          "flag":"virtual",
          "prevStepId":this.nodeInfo.stepId ,//上个节点
          "type":'parallelBranch',// 分支
          'regularNodeKey':'',// 上个节点的key
          "isEnd":0,
          "parentStepId": this.nodeInfo.stepId,
          "children": [
              {
                "stepId":id1,//节点ID
                "name":"并行线路"+id1,//节点名称
                "prevStepId":id ,//上个节点
                "type":'parallelLine',// 分支线路
                'regularNodeKey':'',// 上个节点的key
                "level":1,
                "expression": null,
                "parentStepId": id,
                "children": [
                  {
                    "stepId":id3,//节点ID
                    "name":"审核人"+id3,//节点名称
                    "prevStepId":id1 ,//上个节点
                    'regularNodeKey':'',// 上个节点的key
                    "children": null,
                    "type":'approve',// 审核人
                    "isEnd":1,
                    "parentStepId": id1,
                    'backNode':'',// 退回节点名称
                    "auditType": [], // 审核状态
                    "userIdList":[],
                    "userPermissionSpecific": {
                      "examineType" : 1,
                      "designatedPerson" :[],
                      "designatedRoles": [],
                      "designatedDepartments":[],
                      "actionSpecificList":[],
                      "memberIdList":[]
                    }// 选择的审核人列表
                  }
                ],
              },
              {
                "stepId":id2,//节点ID
                "name":"并行线路"+id2,//节点名称
                'regularNodeKey':'',// 上个节点的key
                "prevStepId":id ,//上个节点
                "type":'parallelLine',// 分支线路
                "level":2,
                "expression": null,
                "parentStepId": id,
                "children": [
                  {
                    "stepId":id4,//节点ID
                    "name":"审核人"+id4,//节点名称
                    "prevStepId":id2 ,//上个节点
                    'regularNodeKey':'',// 上个节点的key
                    "children": null,
                    "type":'approve',// 审核人
                    "isEnd":1,
                    "parentStepId": id2,
                    "auditType": [], // 审核状态
                    "userIdList":[],
                    'backNode':'',// 退回节点名称
                    "userPermissionSpecific": {
                      "examineType" : 1,
                      "designatedPerson" :[],
                      "designatedRoles": [],
                      "designatedDepartments":[],
                      "actionSpecificList":[],
                      "memberIdList":[]
                    }// 选择的审核人列表
                  }
                ],
              },
            ],
          },
          this.addNode(this.dataList,this.nodeInfo.stepId,nodeData,type)
          this.showTip()
        }else if(type==3){
          let id = this.updataId();
          let id1 = this.updataId();
          let id2 = this.updataId();
          let id3 = this.updataId();
          let id4 = this.updataId();
          nodeData = {
          "stepId":id,//节点ID
          "name":"任意分支"+id,//节点名称
          "flag":"virtual",
          "prevStepId":this.nodeInfo.stepId ,//上个节点
          "type":'anyBranch',// 分支
          "isEnd":0,
          "parentStepId": this.nodeInfo.stepId,
          'regularNodeKey':'',// 上个节点的key
          "children": [
              {
                "stepId":id1,//节点ID
                "name":"任意线路"+id1,//节点名称
                "prevStepId":id ,//上个节点
                "type":'anyLine',// 分支线路
                'regularNodeKey':'',// 上个节点的key
                "level":1,
                "expression": null,
                "parentStepId": id,
                "children": [
                  {
                    "stepId":id3,//节点ID
                    "name":"审核人"+id3,//节点名称
                    "prevStepId":id1 ,//上个节点
                    "children": null,
                    "type":'approve',// 审核人
                    "isEnd":1,
                    "parentStepId": id1,
                    "auditType": [], // 审核状态
                    'regularNodeKey':'',// 上个节点的key
                    "userIdList":[],
                    'backNode':'',// 退回节点名称
                    "userPermissionSpecific": {
                      "examineType" : 1,
                      "designatedPerson" :[],
                      "designatedRoles": [],
                      "designatedDepartments":[],
                      "actionSpecificList":[],
                      "memberIdList":[]
                    }// 选择的审核人列表
                  }
                ],
              },
              {
                "stepId":id2,//节点ID
                "name":"任意线路"+id2,//节点名称
                "prevStepId":id ,//上个节点
                "type":'anyLine',// 分支线路
                'regularNodeKey':'',// 上个节点的key
                "level":2,
                "expression": null,
                "parentStepId": id,
                "children": [
                  {
                    "stepId":id4,//节点ID
                    "name":"审核人"+id4,//节点名称
                    "prevStepId":id2 ,//上个节点
                    "children": null,
                    "type":'approve',// 审核人
                    'regularNodeKey':'',// 上个节点的key
                    "isEnd":1,
                    "parentStepId": id2,
                    "auditType": [], // 审核状态
                    "userIdList":[],
                    'backNode':'',// 退回节点名称
                    "userPermissionSpecific": {
                      "examineType" : 1,
                      "designatedPerson" :[],
                      "designatedRoles": [],
                      "designatedDepartments":[],
                      "actionSpecificList":[],
                      "memberIdList":[]
                    }// 选择的审核人列表
                  }
                ],
              },
            ],
          },
          this.addNode(this.dataList,this.nodeInfo.stepId,nodeData,type)
          this.showTip()
        }else if(type==4){
          let id = this.updataId()
          nodeData = {
            "stepId":id,//节点ID
            "name":"固定节点"+id,//节点名称
            "prevStepId":this.nodeInfo.stepId ,//上个节点
            "children": null,
            "type":'regular',// 审核人
            "isEnd":0,
            "parentStepId": null,
            "auditType": [], // 审核状态
            "userIdList":[],
            "userPermissionSpecific": {
              "examineType" : 1,
              "designatedPerson" :[],
              "designatedRoles": [],
              "designatedDepartments":[]
            }// 选择的审核人列表
          }
          this.addNode(this.dataList,this.nodeInfo.stepId,nodeData,type)
        }else if(type==5){
          let id = this.updataId();
          let id1 = this.updataId();
          let id2 = this.updataId();
          let id3 = this.updataId();
          let id4 = this.updataId();
          nodeData = {
          "stepId":id,//节点ID
          "name":"条件分支"+id,//节点名称
          "flag":"virtual",
          "prevStepId":this.nodeInfo.stepId ,//上个节点
          "type":'conditionBranch',// 分支
          "isEnd":0,
          "parentStepId": this.nodeInfo.stepId,
          'regularNodeKey':'',// 上个节点的key
          "children": [
              {
                "stepId":id1,//节点ID
                "name":"条件线路"+id1,//节点名称
                "prevStepId":id ,//上个节点
                "type":'conditionLine',// 分支线路
                'regularNodeKey':'',// 上个节点的key
                "level":1,
                "expression": null,
                "parentStepId": id,
                "children": [
                  {
                    "stepId":id3,//节点ID
                    "name":"审核人"+id3,//节点名称
                    "prevStepId":id1 ,//上个节点
                    "children": null,
                    "type":'approve',// 审核人
                    "isEnd":1,
                    "parentStepId": id1,
                    "auditType": [], // 审核状态
                    'regularNodeKey':'',// 上个节点的key
                    "userIdList":[],
                    'backNode':'',// 退回节点名称
                    "userPermissionSpecific": {
                      "examineType" : 1,
                      "designatedPerson" :[],
                      "designatedRoles": [],
                      "designatedDepartments":[],
                      "actionSpecificList":[],
                      "memberIdList":[]
                    }// 选择的审核人列表
                  }
                ],
              },
              {
                "stepId":id2,//节点ID
                "name":"条件线路"+id2,//节点名称
                "prevStepId":id ,//上个节点
                "type":'conditionLine',// 分支线路
                'regularNodeKey':'',// 上个节点的key
                "level":2,
                "expression": null,
                "parentStepId": id,
                "children": [
                  {
                    "stepId":id4,//节点ID
                    "name":"审核人"+id4,//节点名称
                    "prevStepId":id2 ,//上个节点
                    "children": null,
                    "type":'approve',// 审核人
                    'regularNodeKey':'',// 上个节点的key
                    "isEnd":1,
                    "parentStepId": id2,
                    "auditType": [], // 审核状态
                    "userIdList":[],
                    'backNode':'',// 退回节点名称
                    "userPermissionSpecific": {
                      "examineType" : 1,
                      "designatedPerson" :[],
                      "designatedRoles": [],
                      "designatedDepartments":[],
                      "actionSpecificList":[],
                      "memberIdList":[]
                    }// 选择的审核人列表
                  }
                ],
              },
            ],
          },
          this.addNode(this.dataList,this.nodeInfo.stepId,nodeData,type)
          this.showTip()
        }
      }
    }
}
</script>
<style scoped lang="less">
.add_box{
  width: 240px;
  height: 120px;
  margin: 0 auto;
  position: relative;
}
.line{
  height: 120px;
  width: 1px;
  background: #ccc;
  margin: 0 auto;
}
// .bx_line{
//   background: #3296fa;
// }
// .ry_line{
//   background: #15bc83;
// }
.add_btn{
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: #3296fa;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}

.add-node-popover-body {
    display: flex;

    .add-node-popover-item {
        margin-right: 10px;
        cursor: pointer;
        text-align: center;
        flex: 1;
        color: #191f25 !important;

        .item-wrapper {
            user-select: none;
            display: inline-block;
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            background: #fff;
            border: 1px solid #e2e2e2;
            border-radius: 50%;
            transition: all .3s cubic-bezier(.645, .045, .355, 1);
            text-align: center;
            .iconfont,.iconfont1 {
                font-size: 35px;
                line-height: 60px;

            }
            .icon_text{
              font-size: 12px;
            }
        }

        &.approver {
            .item-wrapper {
                color: #ff943e
            }
        }

        &.notifier {
            .item-wrapper {
                color: #3296fa
            }
        }

        &.any {
            .item-wrapper {
                color: #15bc83
            }
        }

        &.condition {
            .item-wrapper {
                color: #fa4027
            }
        }

        &:hover {
            .item-wrapper {
                background: #3296fa;
                box-shadow: 0 10px 20px 0 rgba(50, 150, 250, .4)
            }

            .iconfont,.iconfont1 {
                color: #fff
            }
        }

        &:active {
            .item-wrapper {
                box-shadow: none;
                background: #eaeaea
            }

            .iconfont,iconfont1 {
                color: inherit
            }
        }
    }
}
</style>